<template>
    <div class="details">
        <div class="w100 haed bbg pr">
            <img class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png"
                @click='back'>
            <p class="fz37 cfff hpd tc">订单管理</p>
        </div>
        <div class="body">
            <div class="main-x">
                <div class="head">
                    <div class="title">
                        <p>核销码 {{ infoObj.verification }}</p>
                        <!-- <p>车辆:奔驰FWE4/f1NA98HHU</p> -->
                        <p>车辆:{{ carType }}</p>
                    </div>
                    <div class="head-main">
                        <p>服务内容</p>
                        <div class="head-main-center">
                            <!-- <p>车辆精洗</p> -->
                            <!-- <p>￥ 100</p>  -->
                            <p>{{ serviceItem }}</p>
                            <p>￥ {{ currentPrice }}</p>
                        </div>
                        <div>
                            <p>车辆附加费用</p>
                            <p>￥ 100</p>
                        </div>
                    </div>
                </div>
                <div class="main">
                    <p>订单信息</p>
                    <div>
                        <p>原价</p>
                        <p>￥ {{ infoObj.originPrice }}</p>
                    </div>
                    <div>
                        <p>优惠</p>
                        <p>￥ {{ infoObj.discount }}</p>
                    </div>
                    <div>
                        <p>实付金额</p>
                        <p>￥ {{ infoObj.currentPrice }}</p>
                    </div>
                    <div>
                        <p>订单编号</p>
                        <p>{{ infoObj.orderCode }}</p>
                    </div>
                    <div>
                        <p>预约时间</p>
                        <p>{{ change(infoObj.bookingTime)  }}</p>
                    </div>
                    <div>
                        <p>支付时间</p>
                        <p>{{ change(infoObj.createdDate)  }}</p>
                    </div>
                    <div>
                        <p>核销时间</p>
                        <p>
                            {{ endTimeDom }}
                        </p>
                    </div>
                </div>
                <div class="foot">
                    <!-- <el-button type="primary" @click="confirm">主要按钮</el-button> -->
                    <button type="info" @click="btn" :disabled="isdisable" :style="style">{{ txt }}</button>

                </div>
            </div>
        </div>

    </div>
</template>
<script>
import { selectCars } from '../../api/index.js'
import { categories } from '../../api/index.js'
import { Button } from 'vant';
import { Dialog } from 'vant';
import 'vant/lib/button/style';
import 'vant/lib/dialog/style';

export default {
    components: {
        Button,
        [Dialog.Component.name]: Dialog.Component,
    },
    data() {
        return {
            txt: '确认核销',
            isdisable: false,
            style: "background-color: rgb(45, 115, 239)",
            endTimeDom: '',
            infoObj: {},
            carType: '',
            serveTemp:[],
            car:[],
            carTemp:[],
            ser:[],
            serTemp:[],
            serviceItem:'',
            currentPrice:''
        }
    },
    mounted() {
        //订单信息
        // console.log('r', this.$route.params.item)
        this.infoObj = this.$route.params.item;
        //车辆信息
        selectCars({
            // uid: this.infoObj.id
            // uid: JSON.parse(localStorage.getItem('ID')) //车主id
            uid: this.infoObj.id //车主id
        })

        .then(r => {
            // console.log('车辆信息', r)
            this.car = r.data
            this.carFil()
            console.log('车辆信息', this.carTemp)
           if(this.carTemp.length == 0){
            this.carType = ' '
           }
           if(this.carTemp.length !== 0){
            this.carType =this.carTemp[0].carType+'/'+this.carTemp[0].carNum
           }
            
        })
         //服务内容
         categories()
         .then(r=>{
            console.log('服务内容1',r)
            this.ser = r.data.list
            
            this.serFil()
            // this.serTemp1 = this.serTemp
            console.log('服务内容2',this.serTemp)
            // console.log('服务内容',this.serveContent)
            this.serviceItem = this.serTemp[0].serviceItem
            this.currentPrice = this.serTemp[0].currentPrice
         })
        // //核销码
        // businessList({ businessId: '2', orderId: 1,verification:this.infoObj.verification })
        //     .then(r => {
        //         console.log('核销', r)
        //     })
       
    },
   
    methods: {
        btn(e) {

            Dialog.confirm({
                title: '核销此订单',
                message: '请你仔细核对订单，此操作不可撤销，请谨慎操作',
                confirmButtonColor: 'blue',
                cancelButtonColor: 'blue'
            })
                .then(() => {
                    // on confirm
                    console.log('ok')
                    this.txt = '已核销',
                    this.isdisable = true,
                    this.style = "background-color: grey;"
                    var time = new Date();
                    var y = time.getFullYear();
                    var m = time.getMonth() + 1;
                    var d = time.getDate();
                    var h = time.getHours();	//返回时
                    var mi = time.getMinutes();	//返回分钟
                    var s = time.getSeconds();	//返回秒数
                    var endTime = y + '-' + this.num(m) + '-' + d + ' ' + h + ':' + mi + ':' + s;
                    this.endTimeDom = endTime

                })
                .catch(() => {
                    // on cancel
                    console.log('no')
                });
        },
        back() {
            this.$router.push('/indentManagement');
        },
        num(s) {
            return s < 10 ? '0' + s : s;
        },
        change(times) {
                var time = new Date(times);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                var h = time.getHours();	//返回时
                var mi = time.getMinutes();	//返回分钟
                var s = time.getSeconds();	//返回秒数
                var endTime = y + '-' + m + '-' + d + ' ' + h + ':' + mi + ':' + s;
                return endTime;
        },
        carFil(){
            this.carTemp = this.car.filter(value => {
                // console.log('car',value)
                // console.log('car1',this.infoObj.id)
                return value.id == this.infoObj.id
            })
        },
        serFil(){
            this.serTemp = this.ser.filter(value => {
                // console.log('ser',value)
                // console.log('car1',this.infoObj.id)

                return value.id == 27
            })
        }
        


    }
}
</script>
<style scoped>
.details {
    background-color: #f7f7f7;
}

.body {
    font-size: 23rem;
    position: relative;
    bottom: 270rem;
    margin: 0 20rem;
}

.main-x {
    background-color: #fff;
    border-radius: 15rem;
    padding: 0 30rem;
}


.head {
    padding: 50rem 0 40rem 0;
    border-bottom: 7rem solid #f7f7f7;
}

.title {
    border-bottom: 7rem solid #f7f7f7;
}

.title p:first-child {
    font-size: 33rem;
}

.title p:last-child {
    font-size: 27rem;
    color: #333333;
    padding: 40rem 0 30rem 0;
}

.head-main {
    padding-top: 40rem;
    /* overflow: hidden; */
}

.head-main>p {
    font-size: 30rem;
}

.head-main div {
    display: flex;
    justify-content: space-between;
    color: #333333;
}

.head-main-center {
    padding: 35rem 0;
}

.main {
    padding: 45rem 0 40rem 0;
}

.main>p {
    margin-bottom: 40rem;
}

.main div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35rem;
}

.main div:last-child {
    margin-bottom: 0;

}

.foot {
    /* width: 100%; */
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: -140rem;
    /* right: 25rem; */
    left: 95rem;
}

.foot button {
    margin: 0 auto;
    border: none;
    border-radius: 35rem;
    color: white;
    width: 520rem;
    height: 70rem;
    background-color: #0662e6;

}
</style>